<template>
  <img class="h-image-component" :style="(styleProps as any)" :src="src" @click.prevent="handleClick" />
</template>

<script lang="ts">
import { transformToComponentProps, imageDefaultProps, imageStylePropNames } from '@/defaultProps'
const defaultProps = transformToComponentProps(imageDefaultProps)
export default {
  name: 'HImage'
}
</script>

<script lang="ts" setup>
import useComponentCommon from '@/hooks/useComponentCommon'

const props = defineProps({
  ...defaultProps
})
const { styleProps, handleClick } = useComponentCommon(props, imageStylePropNames)
</script>
<style lang="scss" scoped>
.h-image-component {
  max-width: 100%;
  position: relative !important;
}
</style>
